<template>
  <div class="sysmpubgoods">
      <!-- <h2>管理员发布商品管理</h2> -->
        <div class="title">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/sysout/sysoutshouye' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>已经发布竞拍商品管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="header">
          <el-input @change="search" v-model="input" placeholder="可以根据商品名、类名进行搜索"></el-input>
          <el-button type="primary">查询</el-button>
        </div>
        <div class="wrapper">
          <el-table :data="tableData" style="width: 100%" border stripe height="700">
            <el-table-column prop="id" label="id" width="80"></el-table-column>
            <el-table-column prop="userId" label="用户id" ></el-table-column>
            <el-table-column prop="goodsName" label="商品名" ></el-table-column>
            <el-table-column prop="startTime" label="开始时间" width="180"></el-table-column>
            <el-table-column prop="endTime" label="结束时间" width="180"></el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleClick(scope.row)">查看</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
          </el-table-column>
          </el-table>
        </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'SysMpubgoods',
    data() {
      return {
        input: "",
        tableData: [],
        allData:[]
      };
    },
    mounted() {
      this.getAllGoodsPublist()
    },
    methods: {
        // 获取所有发布的商品
        getAllGoodsPublist(){
            axios.get("http://localhost:8080/api/getAllGoodspub/getAllGoodspublist",{
              params:{
                id:1
              }
            }).then(
              res=>{
                // this.tableData = res.data
                for(var i= 0;i<res.data.length;i++){
                    var startTemp = Number(String(res.data[i].startTime).slice(11,13))+8
                    var endTemp = Number(String(res.data[i].endTime).slice(11,13))+8
                    var startHour = startTemp%24 >= 10? startTemp%24 :'0'+startTemp%24
                    var endHour = endTemp%24 >= 10? endTemp%24 :'0'+endTemp%24
                    var endDay = Number(String(res.data[i].endTime).slice(8,10))
                    var startDay = Number(String(res.data[i].startTime).slice(8,10))
                    if(endTemp>=24){
                      endDay = endDay+1>=10?endDay+1:'0'+(endDay+1)
                    }else{
                      if(endDay<10){
                        endDay='0'+endDay
                      }
                    }
                    if(startTemp>24){
                      startDay = startDay+1>=10?startDay+1:'0'+(startDay+1)
                    }else{
                      if(startDay<10){
                        startDay='0'+startDay
                      }
                    }
                    res.data[i].startTime = String(res.data[i].startTime).slice(0,8)+ startDay +' ' + startHour + String(res.data[i].startTime).slice(13,19)
                    res.data[i].endTime = String(res.data[i].endTime).slice(0,8)+ endDay + ' ' + endHour + String(res.data[i].endTime).slice(13,19)
                    // state.usersubgoods.push(value [i])
                }
                this.allData = res.data
                this.tableData = this.allData
                console.log("999",res)
                console.log(this.tableData)

              },
              error=>{
                console.log("88",error.message)
              }
            )
        },
        // 删除事件
        handleDelete(index,row){
            console.log("删除行数据为：",index,row,row.id)
            this.$confirm('此操作将永久删除该新闻资讯, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // 执行删除操作--执行删除数据库操作--请求接口
                axios.get("http://localhost:8080/api/deletePubgoods/deletePubgoodslist",{
                  params:{
                    id:row.id
                  }
                }).then(
                  res=>{
                    this.$message({
                      type: 'info',
                      message: '删除成功'
                    }); 
                    // 视图更新nd
                    this.$router.go(0)
                  },
                  error=>{
                    console.log("88",error.message)
                  }
                )
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
        },
        // 查看事件
        handleClick(){

        },
        // 查找事件
        search(val){
          console.log("搜索了----",val,this.allData[0].userId)
          this.tableData = []
          if(val == ' '){
            this.tableData = this.allData
          }else{
            for(var i=0;i<this.allData.length;i++){
              if(this.allData[i].goodsName.indexOf(val) !==-1||this.allData[i].goodsCategory.indexOf(val) !==-1||this.allData[i].goodsCategoryname.indexOf(val) !== -1){
              // if(this.allData[i].goodsName.indexOf(val) !==-1){
                this.tableData.push(this.allData[i])
              }
            }
            if(this.tableData == ''){
              alert("未找到你想要搜索的竞拍商品")
            }
          }
          console.log("查询结果为",this.tableData)
        }
    },
}
</script>

<style lang="less" scoped>
.sysmpubgoods {
  margin: 20px;
  width: 95%;

    .title{
      width: 95%;
      padding: 10px;
      background: #fff;
      border: 1px solid #eee;
      margin-bottom: 20px;
    }
    .header {
      display: flex;
      margin-bottom: 10px;
      button {
        margin-left: 20px;
      }
    }
}
</style>